<template>
	<view class="padding-20">
		<view class="flex-center margin-30-0">
			<view class="flex-alignItems-center " v-if="couponDetail.status == 0">
				<image class="img-40 margin-right20" src="../../../static/image/17.png" mode=""></image>
				<view class="fontSize-18 color-000">购买成功</view>
			</view>
			<view class="flex-alignItems-center " v-else>
				<!-- <image class="img-40 margin-right20" src="../../../static/image/17.png" mode=""></image> -->
				<view class="fontSize-18 color-000">折扣券已使用</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="flex-boderRadius-view bg-fff padding-20 margin-bottom20">
			<view class="flex-alignItems-center margin-bottom20">
				<image class="img-160 margin-right20 border-radius10" :src="couponDetail.goods.image" mode="widthFix">
				</image>
				<view class="flex1 flex-column">
					<view class="flex-between margin-bottom20">
						<view class="fontSize-16 color-000">{{couponDetail.goods.title}}</view>
						<view class="fontSize-15 color-FE3232">{{couponDetail.status_text}}</view>
					</view>
					<view class="flex-between">
						<view class="fontSize-13 color-FE3232">￥<text
								class="fontSize-16">{{couponDetail.goods.price}}</text></view>
						<!-- <view class="fontSize-13 color-999">{{num}}</view> -->
						<!-- <u-number-box v-model=""></u-number-box> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 折扣二维码 -->
		<view class="flex-boderRadius-view flex-justAliCenter-column bg-fff padding-20 margin-bottom20"
			v-if="couponDetail.status == 0">
			<view class="fontSize-18 color-704234 fontWeight-bold margin-bottom20">核销二维码</view>
			<view class="fontSize-20 color-704234 fontWeight-bold margin-bottom30">{{couponDetail.code}}</view>
			<canvas canvas-id="qrcode" style="width: 340rpx;height: 340rpx;margin: 0 auto;" />
			<!-- <image class="img-280 margin-50-0" style="border: 2px solid #967C5E;" src="../../../static/image/002.jpg" mode=""></image> -->
			<!-- <view class="erweima-btn flex-between" @click="discountPopupShow = true">
				<view style="width: 28rpx;"></view>
				<view class="fontSize-15 color-704234">待使用券码2份</view>
				<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
			</view> -->
		</view>

		<view class="flex-boderRadius-view bg-fff padding-20 margin-bottom20">
			<view class="fontSize-18 color-000 fontWeight-bold margin-bottom20">使用须知</view>
			<view class="flex1 margin-bottom20 flex-between">
				<view class="fontSize-15 color-000">开始时间</view>
				<view class="fontSize-15 color-000 margin-right10">{{couponDetail.start_time}}</view>
			</view>
			<view class="flex1 margin-bottom20 flex-between">
				<view class="fontSize-15 color-000">结束时间</view>
				<view class="fontSize-15 color-000 margin-right10">{{couponDetail.end_time}}</view>
			</view>
			<view class="flex1 margin-bottom20 flex-between">
				<view class="fontSize-15 color-000">适用范围</view>
				<view class="fontSize-15 color-000 margin-right10">{{couponDetail.store_title}}</view>
			</view>
		</view>

		<!-- 折扣卷弹窗 -->
		<u-popup :show="discountPopupShow" @close="discountPopupShow = false" :closeable="true">
			<view class="popup-view">
				<view class="fontSize-16 color-000 margin-bottom30 fontWeight-bold">折扣券券码</view>
				<view style="height: 50rpx;"></view>
				<view class="flex-between margin-bottom30">
					<view class="flex-alignItems-center">
						<view class="fontSize-15 color-000 margin-right20">券码1</view>
						<view class="fontSize-15 color-000">1234564587458</view>
					</view>
					<view class="fontSize-15 color-704234">复制</view>
				</view>
				<view class="flex-between margin-bottom30">
					<view class="flex-alignItems-center">
						<view class="fontSize-15 color-000 margin-right20">券码1</view>
						<view class="fontSize-15 color-000">1234564587458</view>
					</view>
					<view class="fontSize-15 color-704234">复制</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uQRCode from '@/utils/uqrcode.js' //引入uqrcode.js
	export default {
		data() {
			return {
				value1: '',
				num: '',
				discountPopupShow: false,
				coupons_id: '',
				couponDetail: {}
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.coupons_id) {
				this.coupons_id = e.coupons_id
				this.getCouponDetail(this.coupons_id)
			}
		},
		methods: {
			// 生成二维码
			qrCode(url) {
				console.log(url)
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: '' + url,
					size: 170,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			// 获取折扣卷详情
			async getCouponDetail(id) {
				let res = await this.$http.post(this.$api.coupon_detail, {
					id: id
				}, {
					token: true
				})
				if (res.code == 1) {
					this.couponDetail = res.data
					this.qrCode(this.couponDetail.id); // 页面加载完成后生成二维码
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.copy-btn {
		padding: 10rpx 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		background: #947065;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
	}

	.erweima-btn {
		width: 360rpx;
		padding: 0 20rpx;
		height: 56rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #947065;
		background: #FFFBF2;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 1rpx solid #6D2205;
	}

	.shop-buys-btn {
		width: 240rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #967C5E;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.insufficient-popup-btn1 {
		width: 200rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #967C5E;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}

	.insufficient-popup-btn {
		width: 200rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #755F47;
		background: rgba(150, 124, 94, 0.14);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		border: 1rpx solid #967C5E;
	}

	.insufficien-popup-view {
		width: 500rpx;
		// height: ;
		padding: 30rpx;
		// background-color: #F8F6F3;
		border-radius: 20rpx;
	}
</style>